<template>
    <el-main>
        <el-select v-model="saveForm.shengId" placeholder="请选择省" @change="changeShiSelect">
            <el-option
                    v-for="item in shengList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>

        <el-select v-model="saveForm.shiId" placeholder="请选择市">
            <el-option
                    v-for="item in shiList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>

        <el-select v-model="saveForm.xianId" placeholder="请选择县">
            <el-option
                    v-for="item in xianList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>

        <hr>
        <el-cascader :props="{value:'id',label:'name',children:'sub'}"
                v-model="selectIds"
                :options="areaTreeData"
                @change="handleChange"></el-cascader>
        <el-button @click="treeSetVal">回显</el-button>

        <hr>

        <el-tree
                :data="treeData"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :props="{id:'id',label:'name',children:'subMenuList'}">
        </el-tree>

        <div class="buttons">
            <el-button @click="getCheckedNodes">通过 node 获取</el-button>
            <el-button @click="getCheckedKeys">通过 key 获取</el-button>
            <el-button @click="setCheckedNodes">通过 node 设置</el-button>
            <el-button @click="setCheckedKeys">通过 key 设置</el-button>
            <el-button @click="resetChecked">清空</el-button>
        </div>

        <hr>

        <el-checkbox-group v-model="checkedRoles" @change="handleCheckedRolesChange">
            <el-checkbox v-for="item in roleList" :label="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>

    </el-main>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                roleList:[],
                checkedRoles:[],

                treeData:[],
                saveForm:{
                    shengId:null
                },
                shengList:[],
                shiList:[],
                xianList:[],
                //会把选择中省市区的Id放到数据里面  [1,2,3]
                selectIds:[],
                areaTreeData:[
                    {
                        id:1,
                        name:"河北",
                        sub:[
                            {
                                id:2,
                                name:"沧州",
                                sub:[
                                    {
                                        id:3,
                                        name:"泊头",
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id:4,
                        name:"河南",
                        sub:[
                            {
                                id:5,
                                name:"郑州",
                                sub:[
                                    {
                                        id:6,
                                        name:"河西区",
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        },
        methods:{

            handleCheckedRolesChange(val) {
                console.log(val)
                console.log(this.checkedRoles)
            },
            //查询
            getBindMenuId() {
                let roleId = 1;
                //从关系表根据roleId查询已绑定的菜单Id
                //调用tree的方法选择中菜单
               /* setCheckedKeys() {
                    this.$refs.tree.setCheckedKeys([52,51]);
                }*/

            },
            //绑定
            bindMenu() {
                let roleId = 1;
                //调用tree方法，拿到选中的菜单Id
                /*getCheckedKeys() {
                    console.log(this.$refs.tree.getCheckedKeys());
                }*/
                //把roleId和菜单Id发送到后台，保存到关系表中
            },
            getCheckedNodes() {
                console.log(this.$refs.tree.getCheckedNodes());
            },
            getCheckedKeys() {
                console.log(this.$refs.tree.getCheckedKeys());
            },
            setCheckedNodes() {
                this.$refs.tree.setCheckedNodes([{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 9,
                    label: '三级 1-1-1'
                }]);
            },
            setCheckedKeys() {
                this.$refs.tree.setCheckedKeys([52,51]);
            },
            resetChecked() {
                this.$refs.tree.setCheckedKeys([]);
            },

            handleChange(val) {
                console.log(val);
                this.saveForm.shengId=val[0];
                this.saveForm.shiId=val[1];
                this.saveForm.xianId=val[2];
                console.log(this.saveForm)
                console.log(this.selectIds)
            },
            changeShiSelect() {
                console.log("changeShiSelect")
                let pid = saveForm.shengId;
                this.axios.get("http://localhost:8888/area/getListByPid",{params:{pid:pid}}).then(res=>{
                    this.shiList=res.data.data;
                })
            },
            treeSetVal() {
                //三级联动回显
                this.selectIds=[2,33,378];
            }
        },
        created() {
            /*this.axios.get("http://localhost:8888/area/getListByPid",{params:{pid:"1"}}).then(res=>{
                this.shengList=res.data.data;
                this.saveForm.shengId=3;
            })

            this.axios.get("http://localhost:8888/area/getTreeData",{params:{pid:"1"}}).then(res=>{
                this.areaTreeData=res.data.data;
            })*/

            this.axios.get("http://localhost:8888/menu/getTreeData",{params:{parentId:"0"}}).then(res=>{
                this.treeData=res.data.data;
            })

            this.axios.get("http://localhost:8888/role/getAll").then(res=>{
                this.roleList=res.data.data;
            })
        }
    }
</script>

<style scoped>

</style>